装饰器应用-大碗字典

需求简述

表格加载数据时，根据数据查询key值映射渲染为显示value值。好比DB存的”1/0”,表格渲染完即为“是/否”。

Input: key,需要开发者指定

Output: value

目标

简化代码篇幅↓；提高业务开发人员效率↑

原始版

原版代码量像碗面，又长又宽，大概像下面这样：

private mounted() {
    // 查询页面相关字典（初始化：准备数据）
    this.refDicReady();
    // 数据准备结束后，查询列表；渲染页面model
    this.$nextTick(() => {
        this.query();
    });
}
// 查询页面相关字典（初始化：准备数据）
private refDicReady() {
    const dic = new DicReqVO();
    dic.parentDicCodeList = [
        XxConst.TYPE,
        XxConst.DATASOURCE,
        //// 问题一：十个的话就在后面加长加宽写十个
    ];
    this.dicService.dicMultipleAllList(dic).then((res: ResponseData) => {
        /** XX类型 */
        this.xxDic.type = res.data[XxConst.TYPE];
        /** Xx字典 */
        this.xxDic.dataSource = res.data[XxConst.DATASOURCE];
        //// 问题二：又写了一碗，更多项的话下面就...继续加长加宽
    });
}
/**
 * 问题三 字典格式化函数每个业务Controller写了一碗
 */
private dictionaryFormatter({ cellValue, row, rowIndex, column, columnIndex }) {
    return this.dicFormatter(...);
}
/**
 * dicFormatter是原作者唯一想到提取到共通BaseController里的方法...
 */
dicFormatter(cellValue: string, dics: DicRepVO[]) {
    ...
}

vue页面中使用

1	:formatter="dateFormatter"

1.0版 - 封装独立类DictLoader

将需要开发者指定的key值封装成Map类型DIC_MAP放入XxConst，页面不再重复写两遍
dicFormatter、dictionaryFormatter、以及更加业务Map加载初始化统一封装到DictLoader

Controller中服用是不是爽口许多~

/** 字典构造器 可抽取至base */
private dictLoader = new DictLoader();
private async mounted() {
    // 字典加载后调用查询
    this.dictLoader.init( DataSourceConst.DIC_MAP ).then(() => {
        this.query();
    });
}

vue页面中使用

1	:formatter="dictLoader.format"

2.0版 - 自定义装饰器Dict

基于Decorators思想进一步简化

Controller中服用

/** 字典构造器 可抽取至base */
private dictLoader = new DictLoader();
@Dict( DataSourceConst.DIC_MAP )
private mounted() {
    this.query();
}

自定义注解Dict

/*
 * @Description: 
 * @Author: chenhongen
 * @Date: 2020-01-01 14:16:26
 */
export function Dict( map: Map<string, string>) {    
    return function (target: any,
        key: string,
        descriptor: TypedPropertyDescriptor<any>): TypedPropertyDescriptor<any> {
            const oldValue = descriptor.value
            descriptor.value = function () {
                this.dictLoader.init( map ).then(() => {
                    // 执行原方法
                    oldValue.apply(this, this.arguments);
                });
            }
            return descriptor
    }
}

> 关于我

rebey.cn